<template>
    <div id="approvalProcess" style="width: 100%;height:100%;"></div>
</template>

<script>
export default {
    name: 'approvalProcessEchart',
    props: {
        historyData: {
            type: Array,
            default: []
        },
        total: {
            type: Number,
            default: 0
        },
        step: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            option: {},
            flowData: [],
            specialLength: 0,
            statusMap: {
                'COMMIT': 1,
                'End': 4,
                'Process': 1,
                'Reject': 2,
                'Recall': 3
            },
            colorMap: {
                fontUsual: '#909399',
                normal: '#ebebeb',
                success: '#5ec0f5',
                error: '#f56c6c'
            },
            label: {
                echartTitle: '审批流程',
                status: {
                    0: '未审批',
                    1: '已审批',
                    2: '驳回',
                    3: '撤回',
                    4: '审批通过'
                },
                end: '结束',
                reject: '驳回',
                recall: '撤回',
                submit: '提交',
                approved: '已审批',
                approval: '审批通过',
                applicant: '申请人',
                flowState: '流程状态',

            },
            nodeSymbol: 'image://data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMjAnIGhlaWdodD0nMjAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1sbnM6c3ZnPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PGc+PHRpdGxlPkxheWVyIDE8L3RpdGxlPjxjaXJjbGUgaWQ9J3N2Z18xJyByPSc1JyBjeT0nMTAnIGN4PScxMCcgc3Ryb2tlLXdpZHRoPSczJyBzdHJva2U9JyM1ZWMwZjUnIGZpbGw9JyNmZmYnLz48L2c+PC9zdmc+'
        }
    },
    created() {
    },
    mounted() {
        this.EC = echarts.init(document.getElementById('approvalProcess'));
    },
    watch: {
        'historyData' (newVal) {
            let historyData = this.delHistoryData(newVal);
            this.flowData = this.generateFlowData(newVal, historyData, this.total);
            this.init();
        }
    },
    methods: {
        generateFlowData(originData, historyData, total) {
            let data = _.cloneDeep(historyData);
            if (originData.length - 1 < total) {
                let diff = total - (originData.length - 1);
                let index = 0;
                while(diff) {
                    let name = this.step[index] 
                        ? this.step[index].approveRoleName
                        : '下一级'
                    data.push({
                        name,
                        id: `future${index}`,
                        status: 0
                    });
                    index++;
                    diff--;
                }
            }
            data.unshift({
                name: originData[0].approvorName,
                id: 'start',
                status: this.statusMap[originData[0].result]
            })
            data.push({
                name: this.label.end,
                id: 'end',
                status: 4
            })
            return data
        },
        delHistoryData(historyData) {
            let data = [];
            let copyData = _.cloneDeep(historyData);
            copyData.shift();
            copyData.forEach((item, index) => {
                data.push({
                    name: item.approvorName,
                    id: `history${index}`,
                    status: this.statusMap[item.result]
                })
            });
            return data;
        },
        delDataToGraphData(data) {
            let graphData = data.map((item, index) => {
                let it = {};
                it.name = item.name;
                it.id = item.id;
                it.x = index*50;
                it.y = 300;
                return it;
            })
            graphData.unshift({
                name: 'startPlaceholder',
                symbol: 'none',
                x: graphData[0].x - 15,
                y: 300
            }),
            graphData.push({
                name: 'endPlaceholder',
                symbol: 'none',
                x: graphData[graphData.length - 1].x + 15,
                y: 300
            })
            return graphData;
        },
        delDataToLinks(data) {
            let special = [];
            let linksData = [];
            data.forEach((item, index) => {
                let link = {};
                let that = this;
                link.lineStyle = {}
                link.emphasis = {}
                link.value = item.status
                link.symbol = ['none', 'none']
                link.lineStyle.color = this.colorMap.normal;
                link.emphasis.lineStyle = {
                    color: this.colorMap.normal
                }
                if (index !== data.length - 1) {
                    link.source = index + 1
                    link.target =  index + 2
                    switch (item.status) {
                        case 1: 
                        case 4:
                            link.lineStyle.color = this.colorMap.success;
                            link.emphasis.lineStyle = {
                                color: this.colorMap.success
                            }
                            break;
                        case 2:
                            special.push({
                                source: index + 1,
                                target: data.length,
                                value: item.status,
                                symbol: ['none', 'none'],
                                lineStyle: {
                                    color: this.colorMap.error,
                                    curveness: data.length - 1 - index == 1 ? 0 : 0.5
                                },
                                label: {
                                    show: true,
                                    fontSize: 14,
                                    color: this.colorMap.error,
                                    formatter: function() {
                                        return that.label.reject
                                    }
                                }
                            })
                            break;
                        case 3:
                            special.push({
                                source: index + 1,
                                target: data.length,
                                value: item.status,
                                symbol: ['none', 'none'],
                                lineStyle: {
                                    color: this.colorMap.error,
                                    curveness: data.length - 1 - index == 1 ? 0 : 0.5
                                },
                                label: {
                                    show: true,
                                    fontSize: 14,
                                    color: this.colorMap.error,
                                    formatter: function() {
                                        return that.label.recall
                                    }
                                }
                            })
                            break;
                    }
                    let that = this;
                    link.label = {
                        show: true,
                        lineHeight: -50,
                        padding: [-50, 0, 0, 0],
                        fontSize: 14,
                        color: this.colorMap.fontUsual,
                        formatter: function() {
                            if (index == 0) {
                                return that.label.submit;
                            } else if (item.status == 1) {
                                return that.label.approved;
                            } else if (item.status == 4) {
                                return that.label.approval
                            } else {
                                return '';
                            }
                        }
                    }
                    linksData.push(link);
                }
            })
            let endLineStyle = linksData[linksData.length - 1].lineStyle
            linksData.push({
                source: 0,
                target: 1,
                lineStyle: {
                    color: this.colorMap.success
                },
                emphasis: {
                    lineStyle:{
                        color: this.colorMap.success
                    }
                }
            }, {
                source: data.length,
                target: data.length + 1,
                lineStyle: endLineStyle,
                emphasis: {
                    lineStyle: endLineStyle
                }
            })
            this.specialLength = special.length;
            return special.concat(linksData);
        },
        init() {
            let that = this;
            this.option = {
                title: {
                    text: this.label.echartTitle
                },
                series: [
                    {
                        type: 'graph',
                        layout: 'none',
                        symbolSize: 30,
                        symbol: this.nodeSymbol,
                        roam: true,
                        label: {
                            show: true,
                            color: '#000',
                            position: 'top',
                            distance: 10
                        },
                        lineStyle: {
                            width: 5,
                            opacity: 1
                        },
                        tooltip: {
                            formatter: function(params) {
                                if (params.dataType == 'node') {
                                    if (params.dataIndex == 0) {
                                        return `${that.label.applicant}：${params.name}`
                                    } else if (params.dataIndex == that.flowData.length) {
                                        return `审批结束`
                                    } else {
                                        // return `第${params.dataIndex}级审批人：${params.name}`
                                    }
                                } else if (params.dataType == 'edge') {
                                    if (params.dataIndex - that.specialLength == 0) {
                                        return `${that.label.flowState}：发起提交`
                                    } else if (params.dataIndex - that.specialLength && that.label.status[params.value]) {
                                        return `${that.label.flowState}：${that.label.status[params.value]}`
                                    }
                                }
                            }
                        },
                        data: this.delDataToGraphData(this.flowData),
                        links: this.delDataToLinks(this.flowData),
                    }
                ]
            }
            this.EC.setOption(this.option);
        }
    }
}
</script>

<style>

</style>